<template>
    <div id="main">
    
    <div id="carousel">

        <el-carousel :interval="4000" type="card" height="250px">
            <el-carousel-item v-for="item in imgList" :key="item">
                <el-image :src="item" fit="contain"></el-image>
             </el-carousel-item>
         </el-carousel>
    </div>
        

    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                item:[],
                 imgList:[
                     require('../assets/images/1.jpg'),
                     require('../assets/images/2.jpg'),
                     require('../assets/images/3.jpg'),
                     require('../assets/images/4.jpg'),
                     require('../assets/images/5.jpg'),
                     require('../assets/images/6.jpg'),
                     require('../assets/images/7.jpg'),
                     require('../assets/images/8.jpg'),
                 ],
                listQuery: {
                    pageNum: 1,
                    pageSize: 8
                },
                total: 0,
                userId: undefined,
                roleCode: ""
            }
        },
        methods: {
            getoutDateDrugNum(){
                this.$get("/drugInfo/getOutDateDrug").then(res=>{
                    if(res.code == 200){
                        this.$notify({
                            title: '提示',
                            message: '有【'+res.data+'】件药品已过期，请及时处理',
                            duration: 6000
                        });
                    }
                });
            }
        },
        created() {
            const user = JSON.parse(window.localStorage.getItem("user"));
            this.roleCode = user.roleCode;
            this.userId = user.id;
            if(this.roleCode !='emp'){
                this.getoutDateDrugNum();
            }
            
        }
    }
</script>

<style scoped>
    .box {
        border: 1px solid #ebeef5;
        height: 242px;
        border-radius: 5px;
        border: 1px solid #ebeef5;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    }
    .notice-content{
        text-decoration: none;
    }

    #main {
        background-color: #fff;
    }

    .content {
        padding: 10px 10px 10px 20px;
    }

    #polyline {
        width: 360px;
        height: 235px;
        /*margin-top: 20px;*/
        margin-left: auto;
        margin-right: auto;
        padding-top: 30px;
    }

    #notice {
        /*width: 340px;*/
        height: 508px;
        margin: auto;
        border: 1px solid #ebeef5;
        /*height: 242px;*/
        border-radius: 5px;
        border: 1px solid #ebeef5;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    }

    .title {
        position: relative;
        top: 16%;
        left: 14%;
    }

    .count {
        position: relative;
        left: 40%;
        top: 28%;
        font-size: 350%;
        color: red;
        /*font-weight: bold;*/
    }

    .unit {
        position: relative;
        top: 25%;
        width: 4px;
        float: right;
        right: 10%;
    }

    .notice-title {

        font-weight: bold;
        font-size: 100%;
        margin-top: 5px;
        margin-left: 8px;
    }

    /deep/ .el-divider {
        margin: 4px 0;
    }

    /deep/ .el-timeline {
        padding-left: 25px;
        padding-top: 15px;
    }

    /deep/ .el-timeline-item {
        padding-bottom: 14px;
    }

    .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    }
    .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
    }
  
    .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
   }
   #carousel{
       text-align: center;
       width: 80%;
       margin: 0 auto;
   }

</style>
